<template>
  <div class="account">
    账号管理

    <el-radio
      v-for="item in list"
      :key="item.id"
      v-model="redi"
      :label="item.ischec"
      @change="sisui"
    />

    <el-checkbox
      v-for="item in service"
      :key="item.id"
      v-model="item.ischec"
      :label="item.text"
      @change="fuwu"
    />
    <br>
    <Leftts />
  </div>
</template>

<script>
import Leftts from './components/leftts'
export default {
  components: { Leftts },
  data() {
    return {
      service: [
        {
          id: 1,
          text: '无忧退货',
          ischec: false
        },
        {
          id: 2,
          text: '快速退款',
          ischec: false
        },
        {
          id: 3,
          text: '免费包邮',
          ischec: false
        }
      ],
      redi: '',
      list: [
        {
          id: 1,
          text: '无忧退货',
          ischec: '四岁'
        },
        {
          id: 2,
          text: '快速退款',
          ischec: '五岁'
        },
        {
          id: 3,
          text: '免费包邮',
          ischec: '六岁'// 进入页面时的状态未选中
        }
      ]
    }
  },
  methods: {
    sisui(e) {
      // 单选框的做法
      console.log(e)
      this.redi = e
    },
    fuwu() {
      // 多选的结果是数组，然后转换成字符串
      var sisui = (this.service.filter(ele => ele.ischec).map(ele => ele.id)).join('&')
      console.log(sisui)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
